<template>
  <div class="Vip_container">
    <el-table
    :data="vipData"
    
    border
    style="width: 100%">
    <el-table-column
      prop="productName"
      label="产品名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="description"
      label="产品描述"
      width="180">
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格">
    </el-table-column>
    <el-table-column
      prop="inventory"
      label="库存">
    </el-table-column>
    <el-table-column
      prop="opration"
      label="操作">
      <template v-slot="{row}">
        <el-button @click="preorder(row)">充值</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>
</template>

<script>
import * as vipApi from '../../../../api/vip'
export default {
  data(){
    return{
      vipData:[],
    }
  },
  methods: {
    preorder(row) {
      console.log(row)
      this.$confirm(`是否要购买${row.productName}`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          localStorage.setItem("vip-row",JSON.stringify(row))
          this.$router.push({name:"preorder"})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
  created() {
    vipApi.getProductApi()
    .then(res=>{
      console.log(res)
      if(res.data.state){
        this.vipData=res.data.data
        this.vipData.splice(3)
      }
    })
  },
}
</script>